<div class="content-heading">Search
    <small>Search and filter results</small>
</div>
<div class="row">
    <div class="col-lg-9">
        <div class="form-group mb-xl">
            <input class="form-control mb" type="text" placeholder="Search products, people, apps, etc." />
            <div class="clearfix">
                <button class="pull-left btn btn-default" type="button">Search</button>
                <div class="pull-right">
                    <label class="checkbox-inline c-checkbox">
                        <input id="inlineCheckbox10" type="checkbox" value="option1" />
                        <span class="fa fa-check"></span>Products</label>
                    <label class="checkbox-inline c-checkbox">
                        <input id="inlineCheckbox20" type="checkbox" value="option2" />
                        <span class="fa fa-check"></span>People</label>
                    <label class="checkbox-inline c-checkbox">
                        <input id="inlineCheckbox30" type="checkbox" value="option3" />
                        <span class="fa fa-check"></span>Apps</label>
                </div>
            </div>
        </div>
        <!-- START panel-->
        <div class="panel panel-default">
            <div class="panel-heading">Search Results
            </div>
            <!-- START table-responsive-->
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th checkAll>
                                <div class="checkbox c-checkbox" tooltip="Check All">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a class="pull-left" href="#">
                                        <img class="media-box-object img-responsive img-rounded thumb64" src="assets/img/dummy.png" alt="" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 1</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a class="pull-left" href="#">
                                        <img class="media-box-object img-responsive img-rounded thumb64" src="assets/img/dummy.png" alt="" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 2</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a class="pull-left" href="#">
                                        <img class="media-box-object img-responsive img-rounded thumb64" src="assets/img/dummy.png" alt="" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 3</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a class="pull-left" href="#">
                                        <img class="media-box-object img-responsive img-rounded thumb64" src="assets/img/dummy.png" alt="" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 4</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" />
                                        <span class="fa fa-check"></span>
                                    </label>
                                </div>
                            </td>
                            <td>
                                <div class="media-box">
                                    <a class="pull-left" href="#">
                                        <img class="media-box-object img-responsive img-rounded thumb64" src="assets/img/dummy.png" alt="" />
                                    </a>
                                    <div class="media-box-body">
                                        <div class="pull-right btn btn-info btn-sm">View</div>
                                        <h4 class="media-box-heading">Product 5</h4>
                                        <small class="text-muted">Category1, Category2</small>
                                        <p>Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- END table-responsive-->
            <div class="panel-footer">
                <div class="row">
                    <div class="col-lg-2">
                        <button class="btn btn-sm btn-default">Clear</button>
                    </div>
                    <div class="col-lg-8"></div>
                    <div class="col-lg-2 text-right">
                        <ul class="pagination pagination-sm">
                            <li class="active"><a href="#">1</a>
                            </li>
                            <li><a href="#">2</a>
                            </li>
                            <li><a href="#">3</a>
                            </li>
                            <li><a href="#">»</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- END panel-->
    </div>
    <div class="col-lg-3">
        <h3 class="m0 pb-lg">Filters</h3>
        <div class="form-group mb-xl">
            <label class="control-label mb">by Text</label>
            <br/>
            <ng-select [allowClear]="true" [items]="items" placeholder="Nothing selected"></ng-select>
        </div>
        <div class="form-group mb-xl">
            <label class="control-label mb">by Date</label>
            <br/>
            <p class="input-group">
                <input class="form-control" type="date" />
                <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                    <em class="fa fa-calendar"></em>
                </button>
            </span>
            </p>
        </div>
        <button class="btn btn-default btn-lg">Apply</button>
    </div>
</div>
